<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-02 11:32:10
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-11-02 14:32:40
-->
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>Hello world!</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      list-style: none;
    }

    #container {
      /*地图(容器)显示大小*/
      width: 100vw;
      height: 100vh;
    }

    .head {
      display: flex;
      width: 100%;
      border: 1px solid #ddd;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 2000;
    }

    .head input,
    .head button {
      height: 50px;
      line-height: 50px;
    }

    .head input {
      flex: 1;
      margin-right: 5px;
      font-size: 18px;
      padding: 0 5px;
    }

    .head button {
      width: 80px;
      font-size: 18px;
    }

    .relList {
      position: fixed;
      top: 52px;
      left: 0;
      width: calc(100% - 85px);
      z-index: 2000;
      background-color: #eee;
      opacity: 0.8;
    }

    .relList li {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      padding: 0 10px;
      color: #179402;
    }
  </style>
  <script src="./js/vue.min.js"></script>
  <!--引入Javascript API GL，参数说明参见下文-->
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></script>
</head>
<!-- 页面载入后，调用init函数 -->

<body onload="initMap()">
  <div id="app">
    <div class="head">
      <input v-model="keyword" />
      <button @click="search(keyword)">搜索</button>
    </div>
    <ul class="relList">
      <li v-for="item in relArr" :key="item.title" @click="clickFun(item.title)">
        {{ item.title }}
      </li>
    </ul>
  </div>
  <!-- 定义地图显示容器 -->
  <div id="container"></div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/jquery.min.js"></script>

  <script>
    geolocation.getLocation(showPosition, showErr, options);
    var vm = new Vue({
      el: '#app',
      data: {
        keyword: '公园',
        relArr: []
      },
      methods: {
        clickFun(word) {
          alert(`你点击了：${word}`)
        },
        search(keyword) {
          that = this;
          let url = `http://apis.map.qq.com/ws/place/v1/search?boundary=nearby(40.040589,116.273543,1000)&keyword=${encodeURI(this.keyword)}&page_size=10&page_index=1&key=EQ3BZ-I5MHX-63Q47-73COP-CF765-6IBOR`
          $.ajax({
            type: "GET",
            url: '/getAddress',
            data: {
              url
            },
            dataType: "json",
            success: function (data) {
              console.log('suc:', data);
              that.relArr = data.data.data;
            },
            error: function (error) {
              console.error('error', error);
            }
          })
        }
      }
    })
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
      //定义地图中心点坐标
      // 科研路12号 (23.17009, 113.44215)
      var center = new TMap.LatLng(23.17009, 113.44215)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById('container'), {
        center: center,//设置地图中心点坐标
        zoom: 18,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
      });

      //创建并初始化MultiMarker
      var markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new TMap.MarkerStyle({
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }
          })
        },
        //点标记数据数组
        geometries: [
          {
            "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle',  //指定样式id
            "position": new TMap.LatLng(23.17009, 113.44215),  //点标记坐标位置
            "properties": {//自定义属性
              "title": "marker1"
            }
          }
        ]
      });
    }
  </script>
</body>

</html>